import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';

import Input from './input';
import Icon from '../Icon/icon';

library.add(fas);


export default {
  title: 'Components/Input',
  component: Input,

} as ComponentMeta<typeof Input>;

/**
 * 默认文本框
 * @returns 
 */
export const input = () => {

  return (
    <>
      text: <Input width={300} />

      password: <Input type="password" width={300} />
    </>
  )
}

/**
 * 带前缀、后缀文本框
 * @returns 
 */
 export const inputWithBeforefix = () => {

  return (
    <>
      <Input width={300} beforefix='http://' />
      <br />
      <Input width={300} afterFix='.com' />
      <br />
      <Input width={300} beforefix={<Icon icon='user' />} />
    </>
  )
}

/**
 * 带图标
 * @returns 
 */
 export const inputWithIcon = () => {

  return (
    <>
      <Input width={300} icon="user" />
    </>
  )
}